<template>
    <div>
    <el-dialog :title="greenLand.name" :visible.sync="dialogShow" :fullscreen="true" width="90%">
        <div class="demo-image__placeholder">
            <div v-for="(photo,photoIndex) in greenLand.greenLandPhotos" :key="'a1'+photoIndex" style="display:inline-block;width:50%">
                <el-upload
                    class="upload-demo"
                    action=""
                    :data="photo"
                    :multiple="false"
                    :show-file-list="false"
                    :http-request="upload"
                    >
                    <el-button size="small" type="primary">更改图片</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-image :src="photo.photoUrl"
                    :lazy="true" fit="fill " >
                        <div slot="error" >
                            <div class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                                加载失败
                            </div>
                        </div>
                </el-image>
            </div>
           
        </div>
        <el-descriptions class="margin-top" title="绿地信息" :column="2" size="" border>
        <template slot="extra">
        <el-button type="primary" size="small" @click="saveGreenLand()">保存绿地信息</el-button>
        </template>
        <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-mobile"></i>
            绿地ID
        </template>
        <el-input v-model="greenLand.id" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-view"></i>
            绿地网络编号
        </template>
        <el-input v-model="greenLand.interNum" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-time"></i>
                创建时间
            </template>
            <el-input v-model="greenLand.date" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-user"></i>
            绿地名称
        </template>
        <el-input v-model="greenLand.name"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-tickets"></i>
            绿地等级
        </template>
        <el-input v-model="greenLand.grade"><template slot="append">级</template></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-office-building"></i>
            绿地面积
        </template>
        <el-input v-model="greenLand.area">  <template slot="append">㎡</template></el-input>
        </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="受灾植物信息" :column="2" size="" border 
            v-for="(sufferInjurie,sufferInjurieIndex) in greenLand.sufferInjuries" :key="'a2'+sufferInjurieIndex">
                <el-descriptions-item >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        受灾植物名称
                    </template>
                    <el-input v-model="sufferInjurie.name"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        健康程度
                    </template>
                    <el-input v-model="sufferInjurie.healthy">  <template slot="append">%</template></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        受灾面积
                    </template>
                    <el-input v-model="sufferInjurie.area">  <template slot="append">㎡</template></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item  v-for="(pest,pestIndex) in sufferInjurie.pests" :key="'a3'+pestIndex">
                    <template slot="label">
                        <i class="el-icon-warning"></i>
                        害虫名称
                    </template>
                    <el-input v-model="pest.name"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item  v-for="(pest,pestIndex1) in sufferInjurie.pests" :key="'a4'+pestIndex1">
                    <template slot="label">
                        <i class="el-icon-warning"></i>
                        害虫数量
                    </template>
                    <el-input v-model="pest.number">  <template slot="append">只</template></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item  v-for="(pest,pestIndex2) in sufferInjurie.pests" :key="'a5'+pestIndex2">
                    <template slot="label">
                        <i class="el-icon-warning"></i>
                        害虫类型
                    </template>
                    <el-input v-model="pest.type"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item  v-for="(viru,viruIndex3) in sufferInjurie.virus" :key="'a6'+viruIndex3">
                    <template slot="label">
                        <i class="el-icon-warning"></i>
                        病毒名称
                    </template>
                    <el-input v-model="viru.name"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item  v-for="(viru,viruIndex) in sufferInjurie.virus" :key="'a7'+viruIndex">
                    <template slot="label">
                        <i class="el-icon-warning"></i>
                        病毒数量
                    </template>
                    <el-input v-model="viru.number"></el-input>
                    </el-descriptions-item>
            </el-descriptions>
        <el-descriptions class="margin-top" title="上传人员信息" :column="2" size="" border 
        v-for="(people,peopleIndex) in greenLand.greenLandMonitorPeople" :key="'a8'+peopleIndex">
            <el-descriptions-item >
                <template slot="label">
                    <i class="el-icon-user"></i>
                    人员信息
                </template>
                <el-input v-model="people.name"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    联系电话
                </template>
                <el-input v-model="people.number"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
    </div>
</template>

<script>
import { AxiosPost } from '../../axios';
export default {
    name: 'Details',

    data() {
        return {
            dialogShow:false,
            greenLand:[]
        };
    },

    mounted() {
       
    },

    methods: {
        show(){
            this.dialogShow=true
        },
         upload(param) {
            const formData = new FormData()
            formData.append('file', param.file)
            console.log(param);
            AxiosPost('photo/saveGreenLandPhoto/'+param.data.id, formData).then(data => {
                if(data.status == 200){
                    this.greenLand.greenLandPhotos.forEach(element => {
                        if(element.id == param.data.id)
                            element.photoUrl =  data.data +"?temp=" + Math.random()
                    });
                }
            }).catch(response => {
              console.log('图片上传失败'+response)
            })
          },
          saveGreenLand(){
              AxiosPost('greenLand/updateWeb', this.greenLand).then(data => {
                if(data.status == 200){
                   this.$notify({title: 'sucess',message:data.data,type: 'success'});
                }
                this.dialogShow=false
                this.$emit("OK",data)
            }).catch(response => {
               this.$notify({title: 'error',message: response.msg,type: 'error'});
            })
          }
    },
};
</script>

<style scoped>
.upload-demo {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: flex-end;
    justify-items: flex-end;
}
.el-descriptions{
    margin-bottom: 20px;
}
.el-image{
    width: 95.5%;
    height: 230px;
    margin: 2.5%;
}
</style>